<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org" lang="zh-CN">

<!-- Connector Mapping -->
<div class="container-fluid">
    <div class="row">
        <div class="col-md-4">
            <form class="form-horizontal" role="form" method="post">
                <!-- 连接器开始位置 -->
                <div class="form-group">
                    <div class="col-md-12">
                        <button type="button" class="btn btn-primary" id="indexAddConnectorBtn">
                            <span class="fa fa-plus"></span>添加连接(4)
                        </button>
                    </div>
                </div>
                <!-- 显示连接器列表 -->
                <div class="row">
                    <div class="col-md-12">
                        <div class="panel panel-default">
                            <!-- 连接器 -->
                            <div class="panel-body text-center">
                                <div class="row connectorList">
                                    <!-- 连接器1 -->
                                    <div class="col-md-3">
                                        <div id="$connectorId" class="jumbotron fastsyncer_block">
                                            <div class="row">
                                                <img th:src="@{/images/mysql.png}">
                                            </div>
                                            <div class="row fastsyncer_over_hidden">
                                                <span title="人力资源系统11111111111">人力资源系统11111111111</span>
                                            </div>
                                        </div>
                                        <!-- 删除操作 -->
                                        <div class="dropdown">
                                            <a data-toggle="dropdown" href="javascript:;"><span class="well-sign-operation"><i class="fa fa-gears fa-1x"></i></span></a>
                                            <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                                                <li url="/connector/remove?id="><a href="javascript:;"><i class="fa fa-trash well-sign-red"></i>&nbsp;&nbsp;删除</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                    <!-- 连接器2 -->
                                    <div class="col-md-3">
                                        <div id="$connectorId" class="jumbotron fastsyncer_block">
                                            <div class="row">
                                                <img th:src="@{/images/oracle.png}">
                                            </div>
                                            <div class="row">
                                                <span title="审计系统">审计系统</span>
                                            </div>
                                        </div>
                                        <!-- 删除操作 -->
                                        <div class="dropdown">
                                            <a data-toggle="dropdown" href="javascript:;"><span class="well-sign-operation"><i class="fa fa-gears fa-1x"></i></span></a>
                                            <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                                                <li url="/connector/remove?id="><a href="javascript:;"><i class="fa fa-trash well-sign-red"></i>&nbsp;&nbsp;删除</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                    <!-- 连接器3 -->
                                    <div class="col-md-3">
                                        <div id="$connectorId" class="jumbotron fastsyncer_block">
                                            <div class="row">
                                                <img th:src="@{/images/ldap.png}">
                                            </div>
                                            <div class="row">
                                                <span title="审计系统">审计系统</span>
                                            </div>
                                        </div>
                                        <!-- 删除操作 -->
                                        <div class="dropdown">
                                            <a data-toggle="dropdown" href="javascript:;"><span class="well-sign-operation"><i class="fa fa-gears fa-1x"></i></span></a>
                                            <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                                                <li url="/connector/remove?id="><a href="javascript:;"><i class="fa fa-trash well-sign-red"></i>&nbsp;&nbsp;删除</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                    <!-- 连接器4 -->
                                    <div class="col-md-3">
                                        <div id="$connectorId" class="jumbotron fastsyncer_block">
                                            <div class="row">
                                                <img th:src="@{/images/redis.png}">
                                            </div>
                                            <div class="row">
                                                <span title="审计系统">审计系统</span>
                                            </div>
                                        </div>
                                        <!-- 删除操作 -->
                                        <div class="dropdown">
                                            <a data-toggle="dropdown" href="javascript:;"><span class="well-sign-operation"><i class="fa fa-gears fa-1x"></i></span></a>
                                            <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                                                <li url="/connector/remove?id="><a href="javascript:;"><i class="fa fa-trash well-sign-red"></i>&nbsp;&nbsp;删除</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                                <div class="row connectorList">
                                    <!-- 连接器1 -->
                                    <div class="col-md-3">
                                        <div id="$connectorId" class="jumbotron fastsyncer_block">
                                            <div class="row">
                                                <img th:src="@{/images/sql_mysql.png}">
                                            </div>
                                            <div class="row fastsyncer_over_hidden">
                                                <span title="人力资源系统11111111111">人力资源系统11111111111</span>
                                            </div>
                                        </div>
                                        <!-- 删除操作 -->
                                        <div class="dropdown">
                                            <a data-toggle="dropdown" href="javascript:;"><span class="well-sign-operation"><i class="fa fa-gears fa-1x"></i></span></a>
                                            <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                                                <li url="/connector/remove?id="><a href="javascript:;"><i class="fa fa-trash well-sign-red"></i>&nbsp;&nbsp;删除</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                    <!-- 连接器2 -->
                                    <div class="col-md-3">
                                        <div id="$connectorId" class="jumbotron fastsyncer_block">
                                            <div class="row">
                                                <img th:src="@{/images/sql_oracle.png}">
                                            </div>
                                            <div class="row">
                                                <span title="审计系统">审计系统</span>
                                            </div>
                                        </div>
                                        <!-- 删除操作 -->
                                        <div class="dropdown">
                                            <a data-toggle="dropdown" href="javascript:;"><span class="well-sign-operation"><i class="fa fa-gears fa-1x"></i></span></a>
                                            <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                                                <li url="/connector/remove?id="><a href="javascript:;"><i class="fa fa-trash well-sign-red"></i>&nbsp;&nbsp;删除</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                    <!-- 连接器3 -->
                                    <div class="col-md-3">
                                        <div id="$connectorId" class="jumbotron fastsyncer_block">
                                            <div class="row">
                                                <img th:src="@{/images/sqlserver.png}">
                                            </div>
                                            <div class="row">
                                                <span title="审计系统">审计系统</span>
                                            </div>
                                        </div>
                                        <!-- 删除操作 -->
                                        <div class="dropdown">
                                            <a data-toggle="dropdown" href="javascript:;"><span class="well-sign-operation"><i class="fa fa-gears fa-1x"></i></span></a>
                                            <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                                                <li url="/connector/remove?id="><a href="javascript:;"><i class="fa fa-trash well-sign-red"></i>&nbsp;&nbsp;删除</a></li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 连接器开结束位置 -->

                <!-- 驱动开始位置 -->
                <div class="form-group">
                    <div class="col-md-12">
                        <button type="button" class="btn btn-primary" id="indexAddMappingBtn">
                            <span class="fa fa-plus"></span>添加驱动(2)
                        </button>
                    </div>
                </div>

                <!-- 显示驱动列表 -->
                <div class="row">
                    <div class="col-md-12">
                        <div class="panel panel-default">
                            <!-- 驱动 -->
                            <div class="panel-body mappingList">
                                <!-- 驱动1 -->
                                <div class="row">
                                    <div class="col-md-12">
                                        <div id="$driverId" class="jumbotron fastsyncer_block">
                                            <!--驱动标题信息 -->
                                            <div class="row text-center">人力资源系统_审计系统</div>

                                            <div class="row">
                                                <!--左边驱动信息 -->
                                                <div class="col-md-5">
                                                    <div class="well well-lg">
                                                        <div class="col-md-4">
                                                            <img th:src="@{/images/mysql.png}">
                                                        </div>
                                                        <div class="col-md-7 fastsyncer_over_hidden">
                                                            <span title="人力资源系统">人力资源系统</span>
                                                        </div>
                                                        <div class="col-md-1"></div>
                                                    </div>
                                                    <span class="well-sign-left"><i class="fa fa-2x fa-circle well-sign-green"></i></span>
                                                </div>

                                                <!--中间图标 -->
                                                <div class="col-md-2">
                                                    <div class="line">
                                                        <span class="running-through-rate well-sign-green">✔</span>
                                                        <span class="running-state">未运行</span>
                                                    </div>
                                                </div>

                                                <!-- 右边驱动信息 -->
                                                <div class="col-md-5">
                                                    <div class="well well-lg">
                                                        <div class="col-md-4">
                                                            <img th:src="@{/images/oracle.png}">
                                                        </div>
                                                        <div class="col-md-7 fastsyncer_over_hidden">
                                                            <span title="人力资源系统">人力资源系统</span>
                                                        </div>
                                                        <div class="col-md-1"></div>
                                                        <span class="well-sign-right"><i class="fa fa-2x fa-times-circle-o well-sign-red"></i></span>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>

                                    <!-- 右上角下拉菜单 -->
                                    <div class="dropdown">
                                        <a data-toggle="dropdown" href="javascript:;"><span class="well-sign-operation"><i class="fa fa-gears fa-2x"></i></span></a>
                                        <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
                                            <li url="/mapping/start?id="><a href="javascript:;"><i class="fa fa-check-circle-o well-sign-green"></i>&nbsp;&nbsp;启动</a></li>
                                            <li url="/mapping/stop?id="><a href="javascript:;"><i class="fa fa-times-circle-o well-sign-red"></i>&nbsp;&nbsp;停止</a></li>
                                            <li url="/mapping/page/edit?id=" loadPage="true"><a href="javascript:;"><i class="fa fa-edit well-sign-green"></i>&nbsp;编辑</a></li>
                                            <li url="/mapping/remove?id=" confirm="true" confirmMessage="确认删除?"><a href="javascript:;"><i class="fa fa-trash well-sign-red"></i>&nbsp;&nbsp;删除</a></li>
                                        </ul>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                <!-- 驱动结束位置 -->
            </form>
        </div>

        <!-- 实时数据 -->
        <div class="col-md-8">实时数据区域</div>

    </div>
</div>

<script type="text/javascript">
    //加载JS
    $.getScript('/js/index/index.js');
</script>
</html>